<template>
  <div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="fuzzy_layer"></div>
  </div>
</template>

<script setup>

</script>

<style scoped>
  .content {
    width: 1280px;
    height: 720px;

    position: absolute;
    left: calc(50% - 640px);
    top: calc(50% - 360px);
    z-index: 20;

    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 40px;
    background-color: rgba(50, 50, 50, 0.8);
    box-sizing: border-box;
    box-shadow: 0 -10px 30px 0 #e1c8de88,
      inset 0 0 40px rgb(86 158 184 / 25%),
      inset 0 0 5px rgb(199 227 250 / 60%),
      inset 0 0 20px rgb(117 142 163 / 35%);
    animation: appear 0.4s forwards ease;
  }

  @keyframes appear {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
  }

  .fuzzy_layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px); /* 底下的图层模糊 */
  }
</style>